<template>
  <div class="question-header">
    <div class="show flex j-c_s-b">
      <div class="show-left a-l_c">
        <img src="@/static/sheet1.jpg" alt="" />
        <div class="question-info column">
          <div class="section-info">
            章节： <span>{{ sectionNumber }} of {{ totalSections }}</span>
          </div>
          <div class="question-number" style="margin-top: 24px">
            题目： <span>{{ questionNumber }} of {{ totalQuestions }}</span>
          </div>
        </div>
      </div>
      <div class="show-middle column">
        <div class="show-middle-text a-l_c" style="margin-top: 10px">
          <div class="hard">
            难度值：<span>{{ difficulty }}%</span>
          </div>
          <div class="trans">
            统计：<span>{{ correctPercentage }}%（正确）</span>｜
            <span>{{ wrongPercentage }}%（错误）</span>
          </div>
        </div>
        <div
          class="showAnswer flex-center"
          style="margin-top: 20px"
          @click="openShowAnswer"
        >
          {{ examStore.currQuestion.showAnswer ? "答案如下" : "点击展示答案" }}
        </div>
      </div>
      <div class="show-right flex">
        <div class="times column">
          <div class="count a-l_c">
            计时：<span>{{ currentTime }}</span>
          </div>
          <div class="ave-count a-l_c" style="margin-top: 20px">
            平均用时：<span>{{ averageTime }}</span>
          </div>
        </div>
        <img src="@/static/sheet2.jpg" alt="" @click="openMaskCalcula" />
      </div>
    </div>

    <div class="answer-i" v-if="examStore.currQuestion.showAnswer">
      <div class="answer-inte">
        <el-select
          placeholder="Select"
          size="large"
          style="width: 139px; margin-right: 20px"
          v-model="currentValue"
          @change="handleChange"
        >
          <el-option
            v-for="item in quesitionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="right-i">
        <div
          :class="['answer-item', v.key ? 'ok' : '']"
          v-for="(v, i) in [9, 10].includes(examStore.currQuestion.type)
            ? quesitionList[current]?.answerList
            : examStore.currQuestion.answerList"
          :key="i"
        >
          <span class="label">{{ v.name }}</span>
          <span class="c">{{ v.check_num }}%</span>
        </div>
      </div>
    </div>

    <!-- <div class="top">

      <div class="left-section">

        <div class="clock-icon">
          <div class="icon-placeholder" style="width: 44px; height: 44px">
            <img src="~@/static/naozhong.png" style="width: 100%; height: 100%" alt="" />
          </div>
        </div>
        <div class="question-info">
          <div class="section-info">
            Section {{ sectionNumber }} of {{ totalSections }}
          </div>
          <div class="question-number">
            Question {{ questionNumber }} of {{ totalQuestions }}
          </div>
        </div>
      </div>

      <div class="middle-section">
        <div class="difficulty">
          <div class="common-label">Difficulty</div>
          <div class="difficulty-value">
            <div class="difficulty-bar"></div>
            <div class="projess">
              <span class="one default"></span>
              <span class="two default"></span>
              <span class="three default"></span>
            </div>
            <div class="project-baifen">{{ difficulty }}%(Hard)</div>
          </div>
        </div>

        <div class="stats">
          <div class="common-label">Question Stats</div>
          <div class="stats-detail">
            {{ correctPercentage }}% ({{ correctTime }}) correct | {{ wrongPercentage }}%
            ({{ wrongTime }}) wrong
          </div>
        </div>
      </div>

      <div class="right-section">
        <div class="average-time">
          <span>Average Time:</span>
          <div>{{ averageTime }}</div>
        </div>

        <div class="timer">
          <span style="width: 85px">{{ currentTime }}</span>
          <div class="timer-icon-placeholder" style="width: 20px; height: 20px"></div>
        </div>
      </div>
    </div> -->
    <!-- <AnswerActions></AnswerActions> -->

    <CalculatorContent
      :visible="enableVisble"
      @update:visible="handleClose"
    ></CalculatorContent>
  </div>
</template>

<script setup>
import AnswerActions from "./answerActions.vue";
import CalculatorContent from "@/components/CalculatorContent/index.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

const current = ref(0);
const quesitionList = ref([]);
const currentValue = ref(quesitionList.value[0]);

const openShowAnswer = () => {
  examStore.currQuestion.showAnswer = true;
};

watch(
  () => examStore.currQuestion.type,
  (val) => {
    if (val == 9) {
      quesitionList.value = examStore.currQuestion.childList.map((i, ind) => {
        return {
          value: ind + 1,
          label: `Qusetion${ind + 1}`,
          answerList: i?.answerList.map((a, index) => ({
            name: a.name,
            check_num: a.check_num,
            key:
              examStore.currQuestion.answerList.findIndex((j) => j.id == i.is_right) ==
              index,
          })),
        };
      });
      currentValue.value = quesitionList.value[0];
    } else if (val == 10) {
      quesitionList.value = examStore.currQuestion.childList.map((i, ind) => {
        return {
          value: ind + 1,
          label: `Qusetion${ind + 1}`,
          answerList: i?.answerList.map((a, index) => ({
            name: a.name,
            check_num: a.check_num,
            key: a.key,
          })),
        };
      });
      currentValue.value = quesitionList.value[0];
    } else {
      quesitionList.value = [{ value: 1, label: "Quesition1" }];
      currentValue.value = quesitionList.value[0];
    }
  },
  {
    immediate: true,
  }
);

const enableVisble = ref(false);
const openMaskCalcula = () => {
  enableVisble.value = true;
};
const handleClose = () => {
  enableVisble.value = false;
};
const handleChange = (v) => {
  current.value = v - 1;
  currentValue.value = quesitionList.value[v - 1];
};

defineProps({
  sectionNumber: { type: Number, default: 0 },
  totalSections: { type: Number, default: 0 },
  questionNumber: { type: Number, default: 0 },
  totalQuestions: { type: Number, default: 0 },
  difficulty: { type: Number, default: 0 },
  difficultyText: { type: String, default: "" },
  correctPercentage: { type: Number, default: 0 },
  wrongPercentage: { type: Number, default: 0 },
  correctTime: { type: String, default: 0 },
  wrongTime: { type: String, default: 0 },
  averageTime: { type: String, default: 0 },
  currentTime: { type: String, default: 0 },
});
</script>

<style lang="scss" scoped>
:deep(.el-select) {
  border: 1px solid #126983 !important;
  border-radius: 8px;
  overflow: hidden;
  outline: none;
}

:deep(.el-select__wrapper.is-focused) {
  box-shadow: none;
}
.right-i {
  display: flex;
  gap: 10px;
  align-items: center;
  .answer-item {
    // width:40px;
    padding: 0px 10px;
    border: 1px solid #999;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid red;
    font-size: 14px;
    color: #333;
    &.ok {
      background-color: #126983;
      color: #fff !important;
      border-bottom: 2px solid #126983;
      .c {
        color: #fff;
      }
    }
    .label {
      text-align: right;
    }
    .c {
      text-align: center;
      font-weight: 600;
      color: #126983;
    }
  }
}
.answer-i {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.question-header {
  // padding: 12px
  // height: 500px;
  padding: 20px;
  background: #fff;
  border: 10px solid #dbedf5;

  .show {
    width: 100%;
    // height: 120px;
    background-color: #fff;

    .show-left {
      img {
        width: auto;
        height: 90px;
      }

      .question-info {
        margin-left: 10px;
        // padding: 24px 0;

        .section-info,
        .question-number {
          font-size: 16px;

          span {
            color: #126983;
          }
        }
      }
    }

    .show-middle {
      // padding: 20px 0;
      .show-middle-text {
        .hard,
        .trans {
          span {
            color: #126983;
          }

          &.trans {
            margin-left: 30px;
            span:nth-child(2) {
              color: #ff4d4f;
            }
          }
        }
      }

      .showAnswer {
        width: auto;
        height: 40px;
        color: #126983;
        border-radius: 4px;
        background: rgba(33, 150, 243, 0.1);
        cursor: pointer;
      }
    }

    .show-right {
      img {
        width: auto;
        height: 90px;
        cursor: pointer;
      }
      .times {
        margin-right: 10px;
        // padding: 20px 0;
        .count {
          span {
            width: 130px;
            font-size: 30px;
            font-weight: 500;
            color: #126983;
          }
        }

        .ave-count {
          span {
            color: #126983;
          }
        }
      }
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  //
  .common-label {
    margin-bottom: 4px;
  }

  .left-section {
    display: flex;
    align-items: center;
    gap: 12px;

    .clock-icon {
      .icon-placeholder {
        background-color: #e0e0e0;
        border-radius: 4px;
      }
    }

    .question-info {
      .section-info {
        font-size: 14px;
        color: #126983;
        font-weight: 400;
        margin-bottom: 4px;
      }

      .question-number {
        font-size: 14px;
        color: #333;
        font-weight: 600;
      }
    }
  }

  .middle-section {
    // flex-grow: 1;
    // margin: 0 40px;
    display: flex;
    gap: 40px;

    .difficulty,
    .stats {
      font-size: 14px;
      color: #126983;
      font-weight: 400;

      span {
        // color: #666;
        font-size: 14px;
        margin-right: 8px;
        color: #333;
        font-weight: 600;
      }
    }

    .difficulty-value {
      display: inline-block;
      position: relative;
      display: flex;
      align-items: center;

      .difficulty-bar {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 4px;
        background-color: #ff4d4f;
        border-radius: 2px;
      }
    }

    .stats-detail {
      display: inline-block;
      // color: #2c3e50;
      color: #333;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .right-section {
    display: flex;
    align-items: center;
    gap: 20px;

    .average-time {
      text-align: right;
      color: #333333;
      font-size: 12px;
      font-weight: 400;
    }

    .timer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid #126983;
      font-size: 20px;
      font-weight: 600;
      color: #126983;
      border-radius: 4px;
      background-color: #ffffff;

      .timer-icon-placeholder {
        background-color: #e0e0e0;
        border-radius: 50%;
      }
    }
  }
}
.projess {
  display: flex;
  align-items: flex-end;
  // gap:2px;
  .default {
    margin-right: 2px !important;
    width: 2.25px;
    height: 10.13px;

    border-radius: 18px;
    background-color: #ffffff;
    &.one {
      height: 5.63px;
      background-color: #e52121;
    }
    &.two {
      height: 7.88px;
    }
  }
}
.project-baifen {
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
  text-align: left;
  margin-left: 10px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #333;
}
</style>
